<template>
  <div>
    <div style="color: #f00; margin-bottom: 10px;">
      下面的你可以不填，但是填写了内容就必须符合一定的业务规则
    </div>
    <el-form inline ref='form' :model='formModel' :rules='rules'>
      <el-form-item label='用户名' prop='username'>
        <el-input v-model="formModel.username" clearable></el-input>
      </el-form-item>
      <el-form-item label='密码' prop='password'>
        <el-input v-model='formModel.password' clearable></el-input>
      </el-form-item>

      <el-form-item label='生日' prop='birthday' clearable>
        <el-date-picker  value-format="yyyy-MM-dd" v-model="formModel.birthday"></el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {

    return {
      rules: {
        username: [
          {max: 6, message: '用户名最多6位', trigger: ['change', 'blur']}
        ],
        password: [
          {max: 6, message: '密码最多6位', trigger: ['change', 'blur']}
        ]
      },
      formModel: {
        username: '',
        password: '',
        birthday: ''
      }
    }
  },

  methods: {
    /**
     * 校验表单。 提供给父组件使用
     * @returns {Boolean}
     * @example
     * this.$refs['com-1'].checkForm()
     */
    checkForm () {
      let isOk = true

      this.$refs['form'].validate(valid => {

        isOk = valid
      })

      return isOk
    },
    /**
     * 为父组件提供校验好的数据
     */
    getFormModel () {
      return this.checkForm() ? {...this.formModel} : null
    }
  }

}
</script>
